<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./template-native.js"></script>
    <script id="tem" type="text/html">
        <% for (var i = 0 ;i < coments.length ;i++) { %>
            <li uid="<%= coments[i].id %>" >
                <p class="floor"><%= coments[i].id %>楼 <a href="javascript:;" class="delete">删除</a></p>
                <p class="layer">层主：<%= coments[i].postID %></p>
                <p class="content"><%= coments[i].content %></p>
            </li>
        <% } %>
    </script>
</head>
<body>
    <div class="box">
        <div class="main">
            <h2>大家一起来吟诗吧</h2>
            <p class="author">楼主：唐诗三百首</p>
            <p class="txt">让我们开始吧</p>
        </div>
        <div class="replay">
            <h4>发表回复</h4>
            <p>用户名：<input type="text" class="users"></p>
            <textarea class="editor" id="" cols="30" rows="10"></textarea>
            <p class="nikname"><input type="checkbox">匿名</p>
            <input type="button" class="btn" value="发表">
        </div>
        <div class="cmts">
            <ul class="list">

            </ul>
        </div>
    </div>
    <script>
        var $list = $('.box .cmts .list')
        var $btn = $('.box .replay .btn')
        var $delete = $('.box .cmts .list')
        getDate();
        // 封装函数
        function getDate(){
            $.ajax({
                url:"http://localhost:3000/db",
                type:"GET",
                success:function(data) {
                    $list.html(template("tem",data))
                    deleteData()
                }
            })
        }
        // 封装删除函数
        function deleteData() {
            $('.box .cmts .list .delete').click(function(){
                $li = $(this).parents('li')
                var index = $li.attr("uid")
                $.ajax({
                    url:"http://localhost:3000/coments/"+index,
                    type:"DELETE"
                })
                $li.remove();
            })
        }
        var $id = $('.box .replay .users')
        var $main = $('.box .replay .editor')
        $btn.click(function() {
            var id = $id.val()
            var main = $main.val()
            if ($('.box .replay input:checkbox').prop("checked") == false) {
                $.ajax({
                    url:"http://localhost:3000/coments",
                    type:"POST",
                    dataType:"json",
                    data: {postID: id,userid: id,content: main},
                    success:function(data){
                        $list.append(template("tem",{"coments": [data]}))
                        $id.val("")
                        $main.val("")
                        deleteData();
                    }
                })
            } else {
                $.ajax({
                    url:"http://localhost:3000/coments",
                    type:"POST",
                    dataType:"json",
                    data: {postID: "佚名",userid: id,content: main},
                    success:function(data){
                        $list.append(template("tem",{"coments": [data]}))
                        deleteData()
                    }
                })
            }
        })
    </script> 
</body>
</html>